<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>A股查询 · 5年波动框架</title>
    <style>
      body { font-family: system-ui, sans-serif; margin: 20px; }
      header { display:flex; align-items:center; gap:12px; }
      input, select, button { padding:6px 8px; }
      table { border-collapse: collapse; width: 100%; margin-top: 12px; }
      th, td { border: 1px solid #ddd; padding: 6px; text-align: right; }
      th { background: #f5f5f5; }
      .row { display:flex; gap:12px; margin-top:8px; }
      .error { color:#b00; }
    </style>
  </head>
  <body>
    <header>
      <h2>简易查询页</h2>
    </header>

    <div class="row">
      <label>股票代码：
        <input id="sym" list="syms" placeholder="e.g. 000001.SZ" />
        <datalist id="syms"></datalist>
      </label>
      <label>开始：<input id="start" placeholder="YYYYMMDD" /></label>
      <label>结束：<input id="end" placeholder="YYYYMMDD" /></label>
      <label>持仓天数：<input id="holdingDays" value="252" type="number" /></label>
      <button id="query">查询</button>
    </div>

    <p id="status"></p>

    <table id="tbl">
      <thead>
        <tr>
          <th>日期</th><th>开</th><th>高</th><th>低</th><th>收</th><th>年化波动率</th><th>滚动高</th><th>滚动低</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <script>
      const api = (p) => fetch(p).then(r => r.json());
      async function loadSymbols() {
        const list = await api('/api/symbols');
        const dl = document.getElementById('syms'); dl.innerHTML = '';
        list.forEach(s => { const opt = document.createElement('option'); opt.value = s.ts_code; dl.appendChild(opt); });
      }
      async function query() {
        const sym = document.getElementById('sym').value.trim();
        const start = document.getElementById('start').value.trim();
        const end = document.getElementById('end').value.trim();
        const holdingDays = document.getElementById('holdingDays').value.trim();
        const status = document.getElementById('status');
        if (!sym) { status.textContent = '请输入股票代码'; status.className = 'error'; return; }
        status.textContent = '查询中…'; status.className = '';
        const params = new URLSearchParams(); params.set('ts_code', sym);
        if (start) params.set('start', start); if (end) params.set('end', end);
        if (holdingDays) params.set('holdingDays', holdingDays);
        const data = await api('/api/data?' + params.toString());
        if (data.error) { status.textContent = data.error; status.className = 'error'; return; }
        status.textContent = `共 ${data.series.length} 行`;
        const tbody = document.querySelector('#tbl tbody'); tbody.innerHTML = '';
        data.series.slice(-200).forEach(row => {
          const tr = document.createElement('tr');
          const cells = [row.trade_date, row.open, row.high, row.low, row.close, row.annualized_volatility ?? '', row.rolling_high ?? '', row.rolling_low ?? ''];
          cells.forEach(c => { const td = document.createElement('td'); td.textContent = String(c); tr.appendChild(td); });
          tbody.appendChild(tr);
        });
      }
      document.getElementById('query').addEventListener('click', query);
      loadSymbols();
    </script>
  </body>
  </html>